<template>
  <div>
    <div class="container_width common_wrap advanced_search">
      <el-divider>高级检索</el-divider>
      <el-card class="box-card box-card_form mb-10">
        <el-form
          ref="formData"
          :model="formData"
          label-width="150px"
          class="advanced_form"
        >
          <el-form-item label="标准状态：" prop="standardStatus">
            <el-checkbox v-model="checkStatusAll" @change="handleCheckAllStatus"
              >全部</el-checkbox
            >
            <el-checkbox-group
              v-model="formData.standardStatus"
              @change="handleChangeStatus"
            >
              <el-checkbox
                v-for="item in checkExp"
                :label="item.value"
                :key="item.value"
                >{{ item.value }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="采标一致性程度：" prop="degreeofConsistency">
            <el-checkbox v-model="checkDegreeAll" @change="handleCheckAllDegree"
              >全部</el-checkbox
            >
            <el-checkbox-group
              v-model="formData.degreeofConsistency"
              @change="handleChangeDegree"
            >
              <el-checkbox
                v-for="item in checkDegree"
                :label="item.value"
                :key="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="标准分类：" prop="standardClass">
            <el-cascader
              class="cascader_wrap"
              style="width: 780px"
              v-model="formData.standardClass"
              :options="classList"
              :props="props"
              placeholder="请选择标准分类"
              clearable
              @change="handleClassChange"
            ></el-cascader>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标准号：" prop="standardNo">
                <el-input
                  v-model="formData.standardNo"
                  placeholder="请输入标准号"
                  style="width: 300px"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标准名称：" prop="standardTitle">
                <el-input
                  v-model="formData.standardTitle"
                  placeholder="请输入标准名称"
                  style="width: 300px"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="expandFlag">
            <el-row>
              <el-col :span="12">
                <el-form-item label="国际标准分类号：" prop="ICS">
                  <el-input
                    v-model="formData.ICS"
                    placeholder="请输入国际标准分类号"
                    style="width: 300px"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="中国标准分类号：" prop="CCS">
                  <el-input
                    v-model="formData.CCS"
                    placeholder="请输入中国标准分类号"
                    style="width: 300px"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="采用国际标准号：" prop="adoptedStandardNo">
                  <el-input
                    v-model="formData.adoptedStandardNo"
                    placeholder="请输入采用国际标准号"
                    style="width: 300px"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"> </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发布日期：" prop="pubDate">
                  <el-date-picker
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    v-model="formData.pubDate"
                    style="width: 300px"
                    clearable
                    value-format="yyyy-MM-dd"
                    @change="handleChangePubDate"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实施日期：" prop="impDate">
                  <el-date-picker
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    v-model="formData.impDate"
                    style="width: 300px"
                    clearable
                    value-format="yyyy-MM-dd"
                    @change="handleChangeImpDate"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发布单位：" prop="issuedBy">
                  <el-input
                    v-model="formData.issuedBy"
                    placeholder="请输入发布单位"
                    style="width: 300px"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="起草单位：" prop="draftedBy">
                  <el-input
                    v-model="formData.draftedBy"
                    placeholder="请输入起草单位"
                    style="width: 300px"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
          <span class="pointer expand_style" @click="changeExpand">
            {{ expandFlag ? "收起" : "更多选项" }}
            <i
              :class="[expandFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"
            ></i>
          </span>
          <el-row class="text-center">
            <el-button type="primary" @click="getList(1)">提 交</el-button>
            <el-button @click="resetForm('formData')">重 置</el-button>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <el-table
          :data="tableData"
          style="width: 100%"
          tooltip-effect="dark"
          :header-cell-style="{ 'background-color': '#f5f7fa' }"
        >
          <el-table-column
            prop="standardNo"
            label="标准号"
            show-overflow-tooltip
            width="180"
          >
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/basicsearch/detail', scope.row.standardNo)"
                v-html="scope.row.standardNo"
              ></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标准名称"
            show-overflow-tooltip
            width="320"
          >
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/basicsearch/detail', scope.row.standardNo)"
                v-html="scope.row.title"
              ></div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="110">
            <template slot-scope="scope">
              <span v-if="scope.row.status == '现行'" class="num_green">{{
                scope.row.status
              }}</span>
              <span v-if="scope.row.status == '即将实施'" class="num_yel">{{
                scope.row.status
              }}</span>
              <span v-if="scope.row.status == '被代替'" class="num_gray">{{
                scope.row.status
              }}</span>
              <span v-if="scope.row.status == '废止'" class="num_color">{{
                scope.row.status
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pubTime" label="发布日期" width="120">
          </el-table-column>
          <el-table-column
            prop="impDate"
            label="实施日期"
            width="120"
          ></el-table-column>

          <el-table-column prop="" label="">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="goReadOnline(scope.row)"
                >在线阅读</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination_wrap">
          <div>
            共<span class="num_color"> {{ total }} </span>条记录
          </div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout=" sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
       
    </div>
  </div>
</template>

<script>
import {
  advancedSearch,
  standardClass,
  readOnlineNotify,
} from "@/api/search.js";
export default {
  name: "Advanced",
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      expandFlag: false,
      props: {
        value: "standardCode",
        label: "standardName",
        children: "child",
        checkStrictly: true,
      },
      formData: {
        standardStatus: [], //标准状态
        degreeofConsistency: [], //采标一致性
        standardClass: [], //标准分类
        standardNo: "", //标准号
        standardTitle: "", //标准名称
        ICS: "", //国际标准分类号
        CCS: "", //中国标准分类号
        adoptedStandardNo: "", //采用国际标准号
        pubDate: [], //发布日期
        impDate: [], //实施日期
        issuedBy: "", //发布单位
        draftedBy: "", //起草单位
        standardClass1: "", //标准分类
        standardClass2: "", //标准分类
      },
      checkExp: [
        {
          value: "现行",
        },
        {
          value: "即将实施",
        },
        {
          value: "被代替",
        },
        {
          value: "废止",
        },
        {
          value: "废止转行标",
        },
      ],
      checkDegree: [
        {
          label: "等同采用（EQV/IDT）",
          value: "EQV/IDT",
        },
        {
          label: "修改采用（MOD）",
          value: "MOD",
        },
        {
          label: "非等效采用（NEQ）",
          value: "NEQ",
        },
      ],
      checkStatusAll: false,
      checkDegreeAll: false,
      readOnlineStatus: true,
      tableData: [],
      classList: [],
    };
  },
  created() {
    this.getList();
    this.standardClass();
  },
  methods: {
    getList(pageNo) {
      this.pageNo = pageNo ? pageNo : this.pageNo;
      let params = {
        standardStatus: this.checkStatusAll
          ? ""
          : this.formData.standardStatus.join(","),
        degreeofConsistency: this.checkDegreeAll
          ? ""
          : this.formData.degreeofConsistency.join(","),
        standardNo: this.formData.standardNo,
        standardTitle: this.formData.standardTitle,
        ICS: this.formData.ICS,
        CCS: this.formData.CCS,
        adoptedStandardNo: this.formData.adoptedStandardNo,
        pubDateFrom: this.formData.pubDate[0] || "",
        pubDateTo: this.formData.pubDate[1] || "",
        impDateFrom: this.formData.impDate[0] || "",
        impDateTo: this.formData.impDate[1] || "",
        issuedBy: this.formData.issuedBy,
        draftedBy: this.formData.draftedBy,
        standardClass1: this.formData.standardClass1,
        standardClass2: this.formData.standardClass2,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      advancedSearch(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data || [];
          this.total = res.data.page?.total || 0;
          this.readOnlineStatus = res.data.readOnlineStatus;
          this.tableData = this.tableData.map((item) => {
            item.pubTime = (item.pubTime || " ").split(" ")[0];
            item.impDate = (item.impDate || " ").split(" ")[0];
            return item;
          });
        }
      });
    },
    standardClass() {
      standardClass().then((res) => {
        if (res.code == 200) {
          this.classList = res.data;
        }
      });
    },
    // 全选标准状态
    handleCheckAllStatus() {
      this.formData.standardStatus = this.checkStatusAll
        ? this.checkExp.map((item) => {
            return item.value;
          })
        : [];
    },
    handleChangeStatus(value) {
      let checkedCount = value.length;
      this.checkStatusAll = checkedCount === this.checkExp.length;
    },
    // 全选采标一致性程度
    handleCheckAllDegree() {
      this.formData.degreeofConsistency = this.checkDegreeAll
        ? this.checkDegree.map((item) => {
            return item.value;
          })
        : [];
    },
    handleChangeDegree(value) {
      let checkedCount = value.length;
      this.checkDegreeAll = checkedCount === this.checkDegree.length;
    },
    handleChangePubDate(e) {
      if (e == null) {
        this.formData.pubDate = [];
      }
    },
    handleChangeImpDate(e) {
      if (e == null) {
        this.formData.impDate = [];
      }
    },
    handleClassChange(e) {
      this.formData.standardClass1 = e[0] || "";
      this.formData.standardClass2 = e[1] || "";
    },
    goPath(path, no, row) {
      this.$router.push({
        path,
        query: {
          no,
        },
      });
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    changeExpand() {
      this.expandFlag = !this.expandFlag;
    },
    goReadOnline(row) {
      if (!this.readOnlineStatus) {
        this.$message({
          message: "您的套餐余额不足！",
          type: "warning",
        });
        return;
      }
      this.readOnlineNotify(row.standardNo, row.title);
      this.$router.push({
        name: "Pdf",
        params: {
          urlLink:
            "http://file.ng361.com/10201-2008-gbt-e-300.pdf?Expires=1716957548&OSSAccessKeyId=TMP.3Kfm6xDAyknX4XfKgD92eipr11e7gyGR5wDUcTTNmXxHApQRJiZqTjmvkGvzX2CGUh95GQ7i8TG3WjXo1d9xmFKYjF5gKA&Signature=2ULPq4gvZQg%2BFVUb0NA%2BwRmXDi8%3D",
        },
      });
    },
    readOnlineNotify(standardNo, title) {
      readOnlineNotify({
        standardNo,
        title,
      }).then((res) => {
        if (res.code == 200) {
          this.readOnlineStatus = res.data;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.formData.standardClass1 = "";
      this.formData.standardClass2 = "";
    },
  },
};
</script>

<style lang="scss">
.advanced_search {
  .advanced_form {
    position: relative;
    .el-form-item {
      margin-bottom: 12px;
    }
    .expand_style {
      position: absolute;
      right: 20px;
      top: 20px;
      color: #2f74d3;
      font-size: 14px;
    }
    .el-checkbox-group {
      display: inline;
      margin-left: 30px;
    }
  }
}
</style>
